<template>
  <a-result>
    <template #icon> </template>
    <template #extra>
      <div class="slogan">
        <span>W</span><span>E</span><span>L</span><span>C</span><span>O</span><span>M</span><span>E</span>
      </div>
      <div class="subTitle">欢迎使用可期智能管理系统</div>
    </template>
  </a-result>
</template>
<script>
export default {
  name: 'SysRoleManage',

  data () {
    return {}
  },
  computed: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style lang="less" scoped>
@import '~ant-design-vue/es/style/themes/default.less';
.slogan {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  text-shadow: 0 -3px #fff, 3px -3px #fff, 3px 0 #fff, 3px 3px #fff, 0 3px #fff, -3px 3px #fff, -3px 0 #fff,
    -3px -3px #fff;
  span {
    color: #001529;
    animation: spread 3.5s ease-in-out infinite alternate;
  }

  @keyframes spread {
    to {
      color: @primary-color;
      text-shadow: 10px 0 10px @primary-color;
    }
  }

  .for(@num) when (@num <= 7) {
    span:nth-child(@{num}) {
      animation-delay: (@num - 1) * 0.5s;
    }
    .for((@num+1));
  }
  .for(1);
}
.subTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
</style>
